import * as style from "./style";
import { Form, Input, Button, Checkbox, message, Row, Col } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useLocation, useNavigate } from "react-router-dom";
import login_left from "@/assets/images/login_left.png";
import { login } from "@/api/Login";
import { setToken } from "@/utils/auth.ts";
import { connect } from "react-redux";
import { setTagList } from "@/redux/modules/menu";
import { setStoragePermissionBtns, setUserInfo } from "@/redux/modules/user.ts";

export const Login = (props) => {
  const { setTagList, setStoragePermissionBtns, setUserInfo } = props;
  // 跳转路由
  const navigate = useNavigate();
  const [form] = Form.useForm();

  interface FieldType {
    username?: string;
    password?: string;
    remember?: string;
  }

  //   重置方法
  const handleReset = () => {
    form.resetFields();
  };

  // 登录方法
  const onFinish = async (values: any) => {
    // console.log("Success:", values);
    // const res = await login(values);
    // console.log("res ------", res);
    // if (res.data && Object.keys(res.data).length) {
    //     setStoragePermissionBtns([
    //   "system:user:add",
    //   "system:user:edit",
    //   "system:user:del",
    //   "system:user:more",
    //   "system:role:add",
    //   // "system:role:del",
    // ])
    // setUserInfo({
    //   token: '111122323231dfds231',
    //   username: values.loginName,
    //   companyId: '2321233244231',
    //   companyName: '总裁办'
    // })
    //   setToken(res.data.access_token);
    //   message.success("登录成功！");
    //   navigate("/");
    //   setTagList([]);
    //   //   router.navigate('/', {state : { id : '666' }}) // 跳转路由searchPrams传参
    //   // router.navigate('/index/张三/18') // 跳转路由params传参
    //   // router.navigate('/index?name=张三&age=18') // 跳转路由state传参
    // }
    navigate("/");
    setTagList([]);
    setStoragePermissionBtns([
      "system:user:add",
      // "system:user:edit",
      // "system:user:del",
      // "system:user:more",
      "system:role:add",
      // "system:role:edit",
      // "system:role:del",
    ]);
    setUserInfo({
      token: Date.now() + "",
      username: values.loginName,
      companyId: "2321233244231",
      companyName: "总裁办",
    });

    setToken(Date.now());
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <style.LoginWarpper>
      <div className="login-box">
        <div className="login-box-left">
          <img src={login_left} alt="" />
        </div>
        <div className="login-box-right">
          <Form
            name="basic"
            form={form}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: false }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            className="login-form"
          >
            <h1 className="login-text">React-vite</h1>
            <Form.Item<FieldType>
              label="用户名"
              name="loginName"
              rules={[{ required: true, message: "用户名不能为空" }]}
            >
              <Input placeholder="请输入用户名" prefix={<UserOutlined />} />
            </Form.Item>

            <Form.Item<FieldType>
              label="密码"
              name="password"
              rules={[{ required: true, message: "密码不能为空" }]}
            >
              <Input.Password
                placeholder="请输入密码"
                prefix={<LockOutlined />}
              />
            </Form.Item>

            <Form.Item<FieldType>
              name="remember"
              valuePropName="checked"
              wrapperCol={{ offset: 8, span: 16 }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <div className="login-button">
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                  style={{ marginRight: "10px" }}
                >
                  登 录
                </Button>
                <Button
                  htmlType="submit"
                  onClick={handleReset}
                  className="login-form-button"
                >
                  重 置
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </style.LoginWarpper>
  );
};

const menuDispatchToProps = (dispatch) => ({
  setTagList: (menu) => {
    dispatch(setTagList(menu));
  },
  setStoragePermissionBtns: (permissionBtns) => {
    dispatch(setStoragePermissionBtns(permissionBtns));
  },
  setUserInfo: (role) => {
    dispatch(setUserInfo(role));
  },
});

export default connect(null, menuDispatchToProps)(Login);
